<template>
    <div class="ratingselect">
        <div class="rating-type border-1px">
            <span @click="select(2)" class="block positive" :class="{ active: select_Type === 2 }">
                {{ desc.all }}
                <span class="count">{{ratings.length}}</span>
            </span>
            <span @click="select(0)" class="block positive" :class="{ active: select_Type === 0 }">
                {{ desc.positive }}
                <span class="count">{{positives.length}}</span>
            </span>
            <span @click="select(1)" class="block negative" :class="{ active: select_Type === 1 }">
                {{ desc.negative }}
                <span class="count">{{negatives.length}}</span>
            </span>
        </div>
        <div class="switch" @click="toggleContent">
            <span class="icon-check_circle" :class="{'on':only_Content}"></span>
            <span class="text">只看内容评价</span>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
const POSITIVE = 0;
const NEGATIVE = 1;
const ALL = 2;
export default {
  props:{
      ratings:{
          type:Array,
          default(){
              return [];
          }
      },
      selectType:{
          type:Number,
          default:ALL
      },
      onlyContent:{
          type:Boolean,
          default:false
      },
      desc:{
          type:Object,
          default (){
              return {
                  all:'全部',
                  positive:'满意',
                  negative :'不满意'
              }
          }
      }
  },
  computed:{
      positives(){
          return this.ratings.filter((rating) => {
             return rating.rateType === POSITIVE;
          });
      },
      negatives(){
          //过滤完后是一个数组 
          return this.ratings.filter((rating) => {
              return rating.rateType === NEGATIVE;
          });
      },
  },
  data(){
      return{
         select_Type:this.selectType ,
         only_Content:this.onlyContent
      }
  },
  methods:{
      select(type){
          this.select_Type=type;
          this.$emit('ratingType_select',type);
      },
      toggleContent(){
          this.only_Content=!this.only_Content;
          this.$emit('content_toggle',this.only_Content);
      }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin.styl'

.rating-type
    padding 18px 13px
    border-1px(rgba(7, 17, 27, 0.1))
    font-size 0
    .block
        display inline-block
        padding 8px 12px
        margin-right 8px
        border-radius 1px
        font-size 12px
        color rgb(77, 85, 93)
        &.active
            color #fff
        .count
            margin-left 2px
            line-height 2px
            font-size 8px
        &.positive
            background rgba(0, 160, 200, 0.2)
            &.active
                background-color rgb(0, 100, 220)
        &.negative
            background rgba(77, 85, 93, 0.2)
            &.active
                background-color rgb(0, 100, 220)
.switch
    padding 12px 13px
    line-height 24px
    border-bottom 1px solid rgba(7, 17, 27, 0.1)
    color rgb(147, 153, 159)
    .icon-check_circle
        margin-right 4px
        vertical-align bottom
        font-size 24px
        &.on
            color #00c850 
    .text
        font-size 12px
           
    
</style>
